import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import {myAjax, getAuthShop, ROOTURL_TABLE, ROOTPATH} from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

export default React.createClass({
  getInitialState: function() {
    let date = new Date();
    return {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      shopNames: [],
      tData: [{}],
      processData: [{}],
    };
  },
  componentWillMount: function() {
    
  },
  componentDidMount: function() {
    
  },
  handleClick: function() {
		let yearSelect = parseInt(this.refs.yearSelect.value);
		let monthSelect = parseInt(this.refs.monthSelect.value);
    if(!yearSelect || !(/^2\d{3}$/.test(yearSelect))) {
      alert("内容不能为空或格式错误");
      this.refs.yearSelect.focus();
      return
    }
    if(!monthSelect || !(/^0?[1-9]{1}$|^1[0-2]$/.test(monthSelect))) {
      alert("内容不能为空或格式错误");
      this.refs.monthSelect.focus();
      return
    }
		let _this = this;
		myAjax(ROOTURL_TABLE + 'cafune/servant/sermondailydata.api', 'POST', {year: yearSelect, month: monthSelect}, function(data) {
      console.log(data);
      let shopNames = new Set();
      let processData = [];
      let ids = data.servantIds;
      //console.log(ids);
      //将数据按商店分成不同对象
      for (let i in ids) {
        let id = ids[i];
        //使用Set结构
        shopNames.add(data[id].servantShop);
      }
      let shopNameArray = Array.from(shopNames);
      shopNameArray.forEach((name) => {
        for (let i in ids) {
          let id = ids[i];
          if (data[id].servantShop == name) {
            processData.push(data[id]);
          }
        }
      });
      //console.log(processData);
      //数据处理，对象合并
      let serCounts = [];
      for(let i in processData) {
        let a = {'理发师id': processData[i].servantName, '所在理发店': processData[i].servantShop};
        let b = processData[i].dailyServeCount;
        Object.assign(a, b);
        serCounts.push(a);
      }
      //配合select进行数据处理(已无效)
      let shopSelect = this.refs.shopSelect.value;
      if(shopSelect != '请选择商店') {
        let selectedShopData = [];
        serCounts.forEach((data) => {
          if(data['所在理发店'] == shopSelect) selectedShopData.push(data);
        });
        this.setState({
          tData: selectedShopData,
          processData: serCounts, 
          //shopNames: shopNameArray
        });
      } else {
        //配合权限过滤
        let filterData = serCounts.filter((data) => {
          if(this.state.shopsForAdm.indexOf(data['理发店名']) === -1) {
            return false
          } else { return true }
        });
        this.setState({
          tData: filterData,
          processData: serCounts,
          //shopNames: shopNameArray,
        });
      }
		}.bind(_this), function(err) {alert("获取服务器内容失败");});
	},
  onChange: function() {
    let shopSelect = this.refs.shopSelect.value;
    if(shopSelect == '请选择商店')  return; 
    let selectedShopData = [];
    this.state.processData.forEach((data) => {
      if(data['所在理发店'] == shopSelect) selectedShopData.push(data);
    });
    this.setState({tData: selectedShopData});
  },
  handleKeyPress: function(e) {
    if(e.which == 13) {
      this.handleClick();
    }
  },
  render: function() {
    return (
      <div>
      	<div>
        <form>
          <select ref="shopSelect" onChange={this.onChange} className={styles['select']}>
            <option>请选择商店</option>
            {
              this.state.shopNames.map((name) => {
                return (
                  <option value={name}>{name}</option>
                );
              })
            }
          </select>
      		<label >
      			<input ref="yearSelect" onKeyPress={this.handleKeyPress} className={styles.input} placeholder="如：2016" />年
      			<span>&nbsp;&nbsp;</span><input ref="monthSelect" className={styles.input} placeholder="如：3" />月
            <span>&nbsp;&nbsp;</span><input ref="daySelect" onKeyPress={this.handleKeyPress} className={styles.input} placeholder="如：可不填" />日
            <p>日参数可不填，如果查询具体到日期，则显示当天的数据</p>
      		</label>
			    <button type="button" onClick={this.handleClick} onKeyPress={this.handleKeyPress} className={styles.button}>确定</button>
      	</form>
        </div>

        <div>
          <table style={{border: '1px solid black'}}>
            <tbody> 
            <tr>
              <th style={{padding: '20px'}}>理发师</th>
              <th style={{padding: '20px'}}>精剪</th>
              <th style={{padding: '20px'}}>洗吹</th>
              <th style={{padding: '20px'}}>染发</th>
              <th style={{padding: '20px'}}>护理</th>
              <th style={{padding: '20px'}}>洗头</th>
              <th style={{padding: '20px'}}>产品</th>
              <th style={{padding: '20px'}}>充值</th>
              <th style={{padding: '20px'}}>合计</th>
            </tr>
            <tr>
              <td style={{padding: '20px'}}>aaa</td>
              <td style={{padding: '20px'}}>1</td>
              <td style={{padding: '20px'}}>2</td>
              <td style={{padding: '20px'}}>3</td>
              <td style={{padding: '20px'}}>4</td>
              <td style={{padding: '20px'}}>5</td>
              <td style={{padding: '20px'}}>6</td>
              <td style={{padding: '20px'}}>7</td>
              <td style={{padding: '20px'}}>8</td>
            </tr>
            </tbody>
          </table>

          <table style={{border: '1px solid black', marginTop: '10px'}}>
            <tbody>
            <tr>
              <th style={{padding: '20px'}}>理发师助理</th>
              <th style={{padding: '20px'}}>护理</th>
              <th style={{padding: '20px'}}>洗头</th>
              <th style={{padding: '20px'}}>产品</th>
              <th style={{padding: '20px'}}>充值</th>
              <th style={{padding: '20px'}}>合计</th>
            </tr>
            <tr>
              <td style={{padding: '20px'}}>aaa</td>
              <td style={{padding: '20px'}}>1</td>
              <td style={{padding: '20px'}}>2</td>
              <td style={{padding: '20px'}}>3</td>
              <td style={{padding: '20px'}}>4</td>
              <td style={{padding: '20px'}}>8</td>
            </tr>
            </tbody>
          </table>
        </div>
        
      </div>
    );
  }
});


